import React, { Component } from 'react';
import { Modal, Button,Input,Form } from 'antd';
const FormItem = Form.Item;

const CollectionCreateForm = Form.create()(
  (props) => {
    const { visible, onCancel, onCreate, form,record } = props;
    
    
    const { getFieldDecorator } = form;
    return (
      <Modal
        record={record}
        visible={visible}
        title="用户添加/编辑"
        okText="确定"
        onCancel={onCancel}
        onOk={onCreate}
      >
        <Form layout="vertical"  >
          <FormItem  label="Name">
            {getFieldDecorator('name',{initialValue:record.name}, {
              rules: [{ required: true, message: 'Please input the name of collection!' }],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem label="Age">
            {getFieldDecorator('age',{initialValue:record.age},{
              rules: [{ required: true, message: 'Please input the age of collection!' }],
            })(<Input type="textarea" />)}
          </FormItem>
          <FormItem label="Phone">
            {getFieldDecorator('phone',{initialValue:record.phone},{
              rules: [{ required: true, message: 'Please input the phone of collection!' }],
            })(<Input />)}
          </FormItem>
        </Form>
      </Modal>
    );
  }
);

class UserEditModal extends React.Component {
  state = {
    visible: false,
  };
  showModal = () => {
    this.setState({ visible: true });
  }
  handleCancel = () => {
    this.setState({ visible: false });
  }
  handleCreate = () => {
    const form = this.form;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }else{
        console.log('Received values of form: ', values);
        const { onOk } = this.props;
        //const onOk = this.props.onOk;
        onOk(values);
        form.resetFields();
        this.setState({ visible: false });
      }
    });
  }
  saveFormRef = (form) => {
    this.form = form;
  }
  render() {
    return (
      <div>
       
        <span onClick={this.showModal}>
          { this.props.children }
        </span>

        <CollectionCreateForm
          record={this.props.record}
          ref={this.saveFormRef}
          visible={this.state.visible}
          onCancel={this.handleCancel}
          onCreate={this.handleCreate}
        />
      </div>
    );
  }
}
 
export default UserEditModal;